<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<body>
    <style>
        section {
            position: relative;
        }
        #item {
            position: absolute;
            inset: 0;
        }
        #section1 {
            width: 200px;
            height: 200px;
        }

        #section2 {
            width: 300px;
            height: 300px;
        }
    </style>
<section id="section1">
    <div id="item">
        <template shadowRootMode="open">
            <style>
                div {
                    position: absolute;
                    inset: 0;
                    background-color: var(--color, red);
                }
            </style>
            <div></div>
        </template>
    </div>
</section>
<section id="section2">

</section>
<script>
    promise_test(async () => {
        const item = document.querySelector("#item");
        document.querySelector("#section2").moveBefore(item, null);
        await new Promise(resolve => requestAnimationFrame(() => resolve()));
        assert_equals(item.shadowRoot.querySelector("div").getBoundingClientRect().width, 300);
    });
</script>
